<template>
  <div class="Bill" ref='scroll'>
    <div class="Bill-body">
      <div class="Bill-body-item" v-for="value in xList">
        <div class="Bill-body-Title">
          {{value.date}}
        </div>
        <div class="Bill-body-item-detail" v-for="item in value.ListItem" @click="GoToNotice(item.chid,item.id,item.type,item.view)">
          <div class="Bill-body-item-detail-top">
            <div class="item-name">
              {{item.week}}
            </div>
            <div class="item-num">
              <span v-if="item.type==3">-{{item.paid_money}}</span>
              <span v-else>{{item.paid_money}}</span>
            </div>
          </div>
          <div class="Bill-body-item-detail-bottom">
            <div class="item-time">
              {{item.paid_time}}
            </div>
            <div class="item-introduce">
              {{item.title}}
            </div>
          </div>
        </div>
      </div>
      <!--暂无更多-->
      <div class="MoreDiv" v-if="More">
        <i class="el-icon-loading"></i>
        <span>努力加载中</span>
      </div>
      <div class="MoreDiv" v-else>
        <div class="MoreLine"></div>
        <span class="MoreSpan">暂无更多</span>
        <div class="MoreLine"></div>
      </div>
    </div>
  </div>
</template>



<script>
  import {
    Indicator,
    Toast
  } from 'mint-ui';
  export default {
    name: 'Bill',
    data() {
      return {
        More: true,
        Scroll: true,
        page: 1,
        cookieList: [],
        xList: []
      }
    },
    created: function () {
      this.getBill(this.page);

    },
    components: {},
    mounted() {
      this.$refs.scroll.addEventListener('scroll', this.handleScroll);

    },
    methods: {
      aryInit(data) {
        // 数据格式化
        var date = []; //获取年月
        data.forEach(v => {
          date.push(v.time)
        });
        date = [...new Set(date)]; //去重数组并使用es6...拆分对象为数组
        var obj = []; //创建整合用得数组

        date.forEach(v => {
          // 遍历去重数组，格式化整合数组
          obj.push({
            'date': v,
            'ListItem': []
          })
        });
        data.forEach(v => {
          // 遍历所有数据
          for (var index = 0; index < obj.length; index++) {
            // 二次遍历整合过的数组
            if (v.time == obj[index].date) {
              // 判断是否年份相等，相等则放入数组中
              obj[index].ListItem.push(v)
            }
          }
        });
        this.xList = obj;
      },
      // 获取数据
      getBill(page) {
        var vm = this;
        // Indicator.open({
        //   text: '加载中...',
        // });
        this.$ApiCom.bill(page).then(function (res) {
          Indicator.close();
          if (res.data.errCode == 1001) {
            Indicator.open({
              text: '登陆失效...',
            });
            localStorage.clear();
            setTimeout(() => {
              Indicator.close();
              var Sid = localStorage.getItem('Sid');
              vm.$router.push({
                path: `/Login`
              })
            }, 1000);
          } else if (res.data.errCode == 1002) {
            Indicator.open({
              text: '授权失效...',
            });
            // 加密路径，回调路径
            var IndexInfo = encodeURIComponent(window.location.href);
            // 获取sessionId
            var sessionId = sessionStorage.getItem('sessionId');
            setTimeout(() => {
              Indicator.close();
              // 授权
              location.href = 'http://xyb.wujiaping.cn/parent/login/getWxInfo?redirectUri=' + IndexInfo +
                '&&sessionId=' + sessionId;
            }, 1000);
          } else if (res.data.errCode == 0) {

            if (res.data.data.list.length < 1) {
              // 判断是否还有响应数据
              vm.Scroll = false; //阻止继续加载数据
              vm.More = false; //显示暂无更多
            } else {
              // 遍历数据
              res.data.data.list.forEach(v => {
                vm.cookieList.push(v)
              })
              vm.More = false; //显示暂无更多
              vm.aryInit(vm.cookieList);
              setTimeout(() => {
                vm.scroll = true;
              }, 500);
            }
          } else {
            Indicator.open({
              text: res.errMsg,
            });
            setTimeout(() => {
              Indicator.close();
              vm.$router.push({
                path: `/Index`
              })
            }, 1000);
          }
        })
      },
      // 跳转
      GoToNotice(childrenid, id, type, view) {
        var obj = {
          childrenid: childrenid,
          id: id,
          type: type,
          view: view
        };
        this.$store.state.Notice = obj;
        sessionStorage.setItem('Notice', JSON.stringify(obj));
        if (type == 3) {
          this.$router.push({
            path: `/RefundNotice/`+childrenid+`/`+id+`/`+type+'/'+view
          })
        } else if (type == 2) {
          this.$router.push({
            path: `/PayNoticePublic/`+childrenid+`/`+id+`/`+type+'/'+view
          });
        } else {
          this.$router.push({
              path: '/PayNotice',query:{childrenid:childrenid, id:id, type:type, view:view}
          });
        }
      },
      //判断滚动条是否到底部
      handleScroll() {
        var Height = this.$refs.scroll.scrollHeight;
        var scrollTop = this.$refs.scroll.scrollTop + this.$refs.scroll.clientHeight + 20;
        if (scrollTop >= Height && this.Scroll) {
          // this.Scroll如果为false,代表正在读取不允许再次加载数据
          this.$refs.scroll.scrollTop = this.$refs.scroll.scrollHeight;
          document.body.scrollTop = document.body.scrollHeight;
          this.page++;
          this.Scroll = false;
          this.More = true;
          this.getBill(this.page)

        }
      }
    },

  }

</script>

<style scoped>
  @import url("css/Bill.css");

</style>
